<template>
  <div class="page page-child">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-tab__panel">
          <div class="weui-tab__panel_top">
            <i @click="goBack" class="el-icon-arrow-left return-back"></i>
            <div class="top_title"  >
              <p>便签</p>
            </div>
          </div>
          <div class="weui-tab__panel_bd">
            <van-tabs v-model="active" animated swipeable title-active-color="#62c9f8" color="#62c9f8" title-inactive-color="#333" line-width="5.5rem">
              <van-tab :title="item_title"  v-for="(item_title,title_index) in title" :key="title_index">
                <template v-if="active===0">
                  <div style="height:calc(100vh - 86px);overflow:scroll;background-color: #f6f6f6">
                    <!-- 随笔 -->
                    <template v-if="isNull">
                      <div class="empty">
                        <img src="../../../static/images/memo/empty.png"/>
                        <div>点击右下角按钮新建便签</div>
                      </div>
                    </template>
                    <template v-else>
                      <div class="memoWrapper">
                        <template v-for="(item,index) in recently.topData">
                          <div class="memoItem isTop" @click="toDisplay(0,index)" :style="{backgroundColor:item.bgColor,width:memoWidth}" v-longtap="toOperate">
                            <div class="itemLeft">
                              <div class="leftTop">{{item.content.text}}</div>
                              <div class="leftBottom">{{item.date}}</div>
                            </div>
                            <div class="itemRight">
                              <div class="icon iconfont icon-start1"></div>
                            </div>
                          </div>
                          <div class="selectIcon" v-if="isOperate"  @click="toDisplay(0,index)" data-idx="index" data-type="isTop">
                            <div class="icon iconfont" :class="item.isCheck?'icon-xuanzhong3':'icon-weixuanzhong'"></div>
                          </div>
                        </template>
                        <template v-for="(item,index) in recently.data">
                          <div class="memoItem" @click="toDisplay(1,index)" :style="{backgroundColor:item.bgColor,width:memoWidth}" data-idx="index" data-type="normal"   v-longtap="toOperate">
                            <div class="itemLeft">
                              <div class="leftTop">{{item.content.text}}</div>
                              <div class="leftBottom">{{item.date}}</div>
                            </div>
                            <div class="itemRight">
                              <div class="icon iconfont icon-wujiaoxingxingxing1"></div>
                            </div>
                          </div>
                          <div class="selectIcon" v-if="isOperate"  @click="toDisplay(1,index)" data-idx="index" data-type="normal">
                            <div class="icon iconfont" :class="item.isCheck?'icon-xuanzhong3':'icon-weixuanzhong'"></div>
                          </div>
                        </template>
                      </div>
                    </template>
                  </div>
                </template>
                <template v-if="active===1">
                  <div style="height:calc(100vh - 86px);overflow:scroll;background-color: #f6f6f6">
                    <div class="groupContent">
                      <div class="newGroup" @click="newGroup">
                        <div class="itemLeft">
                          <div class="icon iconfont icon-1"></div>
                        </div>
                        <div class="itemRight">
                          <div class="title">新建分组</div>
                        </div>
                      </div>
                      <template v-for="(item,index) in group.data">
                        <div class="groupWrapper" :data-idx="index" @click="toMemoItem(item.title)" >
                          <div class="groupitem">
                            <div class="itemLeft">
                              <div class="icon iconfont icon-bianqian1" :style="{color:item.bgColor }"></div>
                            </div>
                            <div class="itemRight">
                              <div class="title">{{item.title}}</div>
                              <div class="icon iconfont "></div>
                            </div>
                          </div>
                        </div>
                      </template>

                    </div>
                  </div>
                </template>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>
    </div>
    <!-- 新建分组 -->
    <div class="layOpen" v-if="isLayOpen" >
      <div class="layInner">
        <div class="file_title">新建分组</div>
        <div class="file_content">
          <input placeholder="新建分组" v-model="getGroupName"></input>
        </div>
        <div class="colorSelect">
          <div class="colorTitle">颜色选择：</div>
          <div class="colorBox">
            <div class="boxContent">
              <div class="color color1" @click="getColor('#ff0202',0)"></div>
              <div class="color color2" @click="getColor('#09b9ff',1)"></div>
              <div class="color color3" @click="getColor('#ffb64a',2)"></div>
              <div class="color color4" @click="getColor('#a69cff',3)"></div>
              <div class="color color5" @click="getColor('#8fee71',4)"></div>
              <div class="color color6" @click="getColor('#ff9898',5)"></div>
              <div class="color color7" @click="getColor('#0bddba',6)"></div>
              <div class="color color8" @click="getColor('#fff34a',7)"></div>
              <div class="color color9" @click="getColor('#eb41eb',8)"></div>
              <div class="color color10" @click="getColor('#2f9949',9)"></div>
            </div>
          </div>
        </div>
        <div class="hr"></div>
        <div class="file_operate">
          <span class="file_cancel" @click="cancelNew">取消</span>
          <span class="file_create" @click="createNew" :style="{color:btnColor}">创建</span>
        </div>
      </div>
    </div>
    <div class="operateTool" v-if="isOperate">
      <van-tabbar>
        <van-tabbar-item @click="cancelOperate">
          <van-icon class="iconfont" class-prefix="icon" name="guanbi" tag="div"></van-icon>
          <span>取消</span></van-tabbar-item>
        <van-tabbar-item @click="deleteSelect">
          <van-icon class="iconfont" class-prefix="icon" name="delete2" tag="div"></van-icon>
          <span>删除</span></van-tabbar-item>
        <van-tabbar-item @click="selectAll">
          <van-icon class="iconfont" class-prefix="icon" name="quanxuan" tag="div"></van-icon>
          <span>全选</span></van-tabbar-item>
      </van-tabbar>
    </div>
    <div class="btnWrapper" v-if="active===0&&!isOperate" @touchstart="touchStart" @touchmove="touchMoving" @touchend="touchEnd" :style="{top:top,right:right,bottom:bottom,left:left}">
      <div class="newMemo" >
        <span class="icon iconfont icon-penleather"></span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Index"
    ,data(){
      return{
        active:0
        ,title:[
          "随笔"
          ,"分组"
        ]
        ,recently:{  //最近
          topData:[
            {
              content:{
                html:'<p>测试</p><p>一下</p>',
                text:'测试'
              },
              date: '10/26',
              bgColor: '#fff',
              isCheck:false
            },
          ],
          data:[
            {
              content:{
                html:'<p>测试</p><p>一下</p>',
                text:'测试'
              },
              date:'10/26',
              bgColor:'rgba(9, 185, 255,0.08)',
              isCheck: false
            },
          ]
        },
        group:{
          data:[
            {
              title:'旅游',
              createDate:'',
              bgColor:'#ffb64a',
              isCheck:false,
              childData:{
                topData:[
                  {
                    content: {
                      delta: {
                        ops: [
                          { insert: "测试\r一下\r" }
                        ]
                      },
                      html: ' < p wx: nodeid = "58" > 测试</p > <p wx: nodeid="94">一下</p>',
                      text: "测试一下"
                    },
                    date: '10/26',
                    bgColor: '#fff',
                    isCheck: false
                  },
                ],
                normalData:[
                  {
                    content: {
                      delta: {
                        ops: [
                          { insert: "测试\r一下\r" }
                        ]
                      },
                      html: ' < p wx: nodeid = "58" > 测试</p > <p wx: nodeid="94">一下</p>',
                      text: "测试一下"
                    },
                    date: '10/26',
                    bgColor: 'rgba(9, 185, 255,0.08)',
                    isCheck: false
                  },
                ]
              }
            },
            {
              title: '生活',
              createDate: '',
              bgColor: '#8fee71',
              isCheck: false,
              childData: {
                topData: [],
                normalData: []
              }
            }
            ,{
              title: '工作',
              createDate: '',
              bgColor: '#ff0202',
              isCheck: false,
              childData: {
                topData: [],
                normalData: []
              }
            }
            ,{
              title: '学习',
              createDate: '',
              bgColor: '#a69cff',
              isCheck: false,
              childData: {
                topData: [],
                normalData: []
              }
            }
          ]
        }
        ,isNull:true //随笔是否为空
        ,isBtn:true
        ,isLayOpen:false
        ,btnColor:'#ccc'
        ,isOperate:false  //是否为文件操作状态
        ,memoWidth:'100%'  //便签默认宽度
        ,isOperateGroup: false //分组操作状态
        ,getGroupName:null
        ,bgColor:"#ff0202"
        ,isCheckAll:false
        ,top:null
        ,right:'30px'
        ,bottom:'30px'
        ,left:null
        ,isDrag:false, //是否开始拖拽
      }
    }
    ,methods:{
      goBack(){
        this.$router.go(-1)
      }
      ,toOperate(){
        this.isOperate = true;
        this.isBtn = false;
        this.memoWidth = '86%';
      }
      ,newGroup(){
        this.isLayOpen=true;
      }
      ,getColor(color,idx){
        let colorBoxArr = Array.from(document.querySelector('.boxContent').children);
           colorBoxArr.forEach(item=>{
           item.style.backgroundColor='#fff'
         });
        colorBoxArr[idx].style.backgroundColor=color;
        this.bgColor=color;
      }
      ,cancelNew(){
        this.isLayOpen=false;
        this.getGroupName=null;
        this.bgColor="#ff0202";
      }
      ,createNew(){
         if(this.getGroupName.length>0){
           let newGroup={
             title: this.getGroupName,
             createDate: '',
             bgColor: this.bgColor
           };
           this.group.data.unshift(newGroup);
           this.isLayOpen=false;
           this.getGroupName=null;
           this.bgColor="#ff0202"
         }
      }
      ,cancelOperate(){
        this.isOperate = false;
        this.isBtn = true;
        this.memoWidth = '100%';
      //  初始化isCheck
        this.recently.topData.forEach(item=>{
          item.isCheck=false
        });
        this.recently.data.forEach(item=>{
          item.isCheck=false
        });
        if(this.recently.topData.length<=0&&this.recently.data.length<=0){
          this.isNull=true;
        }
      }
      ,deleteSelect(){
          let obj = {
            deleteTopData:()=>{
                this.recently.topData.forEach((item,index,arr)=>{
                     if(item.isCheck){
                       arr.splice(index,1);
                       obj.deleteTopData();
                     }
                })
            }
            ,deleteData:()=>{
              this.recently.data.forEach((item,index,arr)=>{
                if(item.isCheck){
                  arr.splice(index,1);
                  obj.deleteData();
                }
              })
            }
          };
          obj.deleteTopData();
          obj.deleteData();
          this.cancelOperate();
      }
      ,selectAll(){
        this.recently.topData.forEach(item=>{
          item.isCheck=!this.isCheckAll
        });
        this.recently.data.forEach(item=>{
          item.isCheck=!this.isCheckAll
        });
        this.isCheckAll = !this.isCheckAll
      }
      ,toDisplay(pid,id){
        if(!this.isOperate){
          var data = null;
          if(pid===0){
            data = JSON.stringify(this.recently.topData[id]);
          }else{
            data=JSON.stringify(this.recently.data[id]);
          }
          let url = './AddMemo?type='+'display&data='+encodeURIComponent(data)
          this.$router.push(url);
         }else {
           if(pid===0){
             this.recently.topData[id].isCheck=!this.recently.topData[id].isCheck;
           }else if(pid===1){
             this.recently.data[id].isCheck=!this.recently.data[id].isCheck;
           }

         }
      }
      ,toMemoItem(title){
          this.$router.push('/MemoItem?title='+title);
      }
      ,touchStart(e){
        this.isDrag=true;
      }
      ,touchMoving(e){
        this.right='';
        this.bottom='';
        this.top=e.touches[0].pageY-25+'px';
        this.left=e.touches[0].pageX-25+'px';
      }
      ,touchEnd(){
        this.top='';
        this.left='';
        this.right='30px';
        this.bottom='30px';
        this.isDrag=false;
        this.$router.push('./AddMemo?type='+'newMemo')
      }
    }
    ,mounted() {
      if(this.recently.topData.length>0||this.recently.data>0){
        this.isNull=false;
      }
    }
    ,watch:{
      getGroupName(val,oldVal){
        if(val.length>0){
          this.btnColor="#62c9f8"
        }else {
          this.btnColor="#eee"
        }
      }
    }
  }
</script>

<style scoped>
  .empty{
    margin-top: 20%;
    text-align: center;
    font-size: 16px;
    color: gray;
  }
  .empty img{
    width: 235px;
  }
  .memoWrapper{
    padding: 0 15px 80px;
    box-sizing: border-box;
  }
  .memoItem{
    width: 100%;
    display: inline-block;
    margin-top: 7.5px;
    box-shadow: 0 2px 8px -5px #555;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 7.5px;
  }
  .memoItem .itemLeft{
    display: inline-block;
    float: left;
    text-align: left;
    width: 80%;
  }
  .memoItem .itemLeft .leftTop{
    width: 100%;
    overflow: hidden;
    max-height: 25px;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .memoItem.isTop{
    padding: 7px 10px;
  }
  .memoItem.isTop .itemRight{
    margin-right: -2.5px;
  }
  .memoItem .itemRight{
    height: 100%;
    float: right;
    margin-right: 5px;
  }
  .memoItem .itemRight .icon{
    display: inline-block;
    float: unset;
    margin-right: unset;
    line-height: unset;
    color: #888;
    font-size: 22.5px;
  }
  .memoItem .itemRight .icon-start1{
    color: rgb(255, 163, 92);
    font-size: 35px;
  }
  .memoItem .itemLeft .leftTop{
    font-size: 16px;
    color: #333;
  }
  .memoItem .itemLeft .leftBottom{
    font-size: 15px;
    color: gray;
  }
  .selectIcon{
    display: inline-block;
    width: 12%;
    height: 100%;
    line-height: 70px;
    vertical-align: top;
    margin-top: 7.5px;
    text-align: right;
  }
  .selectIcon .icon{
    font-size: 22.5px;
    color: gray;
  }
  .selectIcon .icon-xuanzhong3{
    color: #62c9f8;
  }
  .newGroup, .groupWrapper{
    height: 60px;
    width: 100%;
    background-color: #fff;
  }
  .newGroup .itemLeft, .groupWrapper .itemLeft, .recycle .itemLeft{
    width: 15%;
    height: 100%;
    display: inline-block;
  }
  .newGroup .itemLeft .icon{
    line-height: 60px;
    font-size: 33px;
    color: gray;
    text-align: center;
  }
  .groupWrapper .itemLeft .icon{
    line-height: 60px;
    font-size: 33px;
    /* color: #ffd058; */
    text-align: center;
  }
  .recycle .itemLeft .icon{
    line-height: 60px;
    font-size: 32px;
    color: #62c9f8;
  }
  .newGroup .itemRight, .groupWrapper .itemRight{
    width: 83%;
    height: 100%;
    display: inline-block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    vertical-align: top;
  }
  .itemRight .title{
    text-align: left;
    font-size: 18px;
    line-height: 60px;
    color: #444;
    display: inline-block;
    float: left;
    max-width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .itemRight .icon{
    display: inline-block;
    float: right;
    margin-right: 25px;
    line-height: 60px;
    color: #444;
  }
  .itemRight .icon-checked1{
    color: #62c9f8;
  }
  .layOpen{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    padding-top: 50px;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 9999;
  }
  .layOpen .layInner{
    position: fixed;
    background-color: #fff;
    width: 85%;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%,-50%);
  }
  .layOpen .layInner .file_title{
    text-align: center;
    padding: 10px;
    color: #000;
    font-size: 20px;
  }
  .layOpen .layInner input{
    width: 80%;
    background-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    margin-left: 50%;
    transform: translate(-50%);
    padding-left: 10px;
    border: none;
    outline: none;
  }
  .layOpen .layInner .file_operate{
    padding: 12px;
  }
  .layOpen .layInner .file_operate span{
    display: inline-block;
    width: 49%;
    text-align: center;
    color: #333;
    font-size: 18px;
  }
  .layOpen .layInner .file_operate .file_create{
    color: #62c9f8;
  }
  .colorSelect{
    width: 80%;
    height: 60px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .colorTitle{
    font-size: 17px;
    color: #333;
    vertical-align: top;
    margin-top: 16px;
    display: inline-block;
    width: 35%;
  }
  .colorBox{
    display: inline-block;
    width: 63%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .colorBox .boxContent{
    width: 400px;
  }
  .colorBox .color{
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    margin: 23px 9px;
  }
  .colorBox .color1{
    border:1px solid #ff0202;
    background-color: #ff0202;
  }
  .colorBox .color2{
    border:1px solid #09b9ff;
  }
  .colorBox .color3{
    border:1px solid #ffb64a;
  }
  .colorBox .color4{
    border:1px solid #a69cff;
  }
  .colorBox .color5{
    border:1px solid #8fee71;
  }
  .colorBox .color6{
    border:1px solid #ff9898;
  }
  .colorBox .color7{
    border:1px solid #0bddba;
  }
  .colorBox .color8{
    border:1px solid #fff34a;
  }
  .colorBox .color9{
    border:1px solid #eb41eb;
  }
  .colorBox .color10{
    border:1px solid #2f9949;
  }
</style>
<style>
  .van-tabs--line .van-tabs__wrap{
    border-bottom: 1px solid #eee;
  }
  .operateTool .icon {
    color: #333;
    position: relative;
    margin-bottom: 5px;
    font-size: 18px;
  }

  .operateTool .van-tabbar-item--active {
    color: #333;
  }
  .operateTool .van-tabbar {
    background-color: #f6f6f6;
  }

  .operateTool .van-tabbar-item__text {
    text-align: center;
    color: #333;
  }
  .btnWrapper{
    position: fixed;
    right: 30px;
    bottom: 30px;
  }
  .newMemo span{
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 32px;
    background-color: #62c9f8;
    color: #fff;
    border-radius: 50%;
  }
</style>
